<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bloglist</title>
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }

    .block {
      text-align: center;
    }

    .demo-input-suffix {
      text-align: right;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="add" style="text-align: right;">
      <el-button type="success" style="width: 200px;" @click="dialogFormVisible = true">新增分类</el-button>
    </div>
    <!-- 表单输入/编辑信息 -->
    <el-dialog title="新增标签信息" :visible.sync="dialogFormVisible">
      <el-form :model="formdata" ref="formData">
        <el-form-item label="父标签名称" :label-width="formLabelWidth">
          <el-input v-model="formData.parentName" autocomplete="off" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="子标签名称" :label-width="formLabelWidth" style="width: 300px;">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标签描述" :label-width="formLabelWidth">
          <textarea v-model="formData.description" autocomplete="off" style="width:400px;height:100px"></textarea>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 数据表格信息 -->
    <el-table max-height="500" :data="tableData" align="center" style="width: 100%;"
      :row-class-name="tableRowClassName">

      <el-table-column prop="name" label="标签名称" width="180" align="center">
      </el-table-column>

      <el-table-column prop="parentName" label="父标签名称" width="180" align="center">
      </el-table-column>
      <el-table-column prop="description" label="描述" width="180" align="center">
      </el-table-column>
      <el-table-column prop="amount" label="包含文章数目" align="center" width="180">
      </el-table-column>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="180">
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" align="center" width="180">
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button type="primary" plain size="small" class="blueBug" @click="statusedit(scope.row.id)">修改
          </el-button>
          <el-button type="warning" plain size="small" class="blueBug" @click="statusedit(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :currentPage="currentPage"
        :pageSize="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total=total>
      </el-pagination>
    </div>
  </div>
  <!-- 引入相关组件 -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="/plugins/vue/vue.js"></script>
  <script src="/plugins/element-ui/index.js"></script>
  <link rel="stylesheet" href="/plugins/element-ui/index.css">
  <script>
    new Vue({
      el: '#app',

      data() {
        return {
          input: '',
          currentPage: 1,
          pageSize: 10,
          tableData: [],
          total: '',
          //   表单数据
          dialogFormVisible: false,
          formData: {
          },
          formLabelWidth: '120px'
        }
      },
      created() {
        this.getAll()
      },
      methods: {
        tableRowClassName({ row, rowIndex }) {
          if (rowIndex % 2 === 0) {
            if ((rowIndex / 2) % 2 === 0) {
              return 'success-row';
            }
            return 'warning-row';
          }
          return '';
        },
        getAll() {
          axios({
            method: "get",
            url: "http://localhost:8080/tags/page",
            params: { currentPage: this.currentPage, pageSize: this.pageSize }
          }).then(resp => {
            // console.log(resp.data.code)
            if (resp.data.code == 1) {
              this.tableData = resp.data.data.records
              this.total = resp.data.data.total
            }
          })
        },
        handleSizeChange(val) {
          this.pageSize = val
          this.getAll()
        },
        handleCurrentChange(val) {
          this.currentPage = val
          this.getAll()
        },
        submit() {
          axios({
            method: "post",
            url: "http://localhost:8080/tags",
            data: { "name": this.formData.name, "parentName": this.formData.parentName, "description": this.formData.description }
          }).then(resp => {
            if (resp.data.code == 1) {
              this.$message.success(resp.data.data)

              // 表单数据清空
              this.$refs.formData.resetFields()
              this.dialogFormVisible = false
            }
          })
        }


      }
    })
  </script>
</body>

</html>